<template>
  <div>
      <block v-if="showSkeleton">
          <homepage v-if="skeleton.name=='homepage'"></homepage>
          <study  v-else-if="skeleton.name=='study'"></study>
          <study-Data  v-if="skeleton.name=='studyData'"></study-Data>
          <exam  v-else-if="skeleton.name=='exam'"></exam>
          <examsub  v-else-if="skeleton.name=='examsub'"></examsub>
          <history  v-else-if="skeleton.name=='history'"></history>
          <result  v-else-if="skeleton.name=='result'"></result>
          <study-Details  v-if="skeleton.name=='studyDetails'"></study-Details>
      </block>
      <block v-else-if="showException">
        <exception @process="process"></exception>
      </block>
      <slot v-else name="content"></slot>
  </div>
</template>

<script>
import {mapState} from 'vuex';
import homepage from './homepage/index'
import study from './study/index'
import exam from './exam/index'
import examsub from './exam/examsub'
import history from './exam/history'
import result from './exam/result'
import exception  from './exception/index'
import studyDetails  from './study/studyDetails'
import studyData  from './study/studyData'


export default {
  name:'skeleton',
  props: {
    skeleton:{
        type:Object,
        default:function(){
          return  {
            name:'homepage'
          }
        }
    },
    showException:{
      type:Boolean,
      default:false
    },
    showSkeleton:{
      type:Boolean,
      default:true
    }
  },
  components: {homepage,study,exam,examsub,history,result,exception,studyDetails,studyData},
  methods:{
    process(){
      this.$emit('process')
    }
  }
};
</script>

<style scoped>

</style>
